<!DOCTYPE html>
<!--[if IE]><![endif]-->
<!--[if IE 8 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie8"><![endif]-->
<!--[if IE 9 ]><html dir="{{ direction }}" lang="{{ lang }}" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html dir="{{ direction }}" lang="{{ lang }}">
<!--<![endif]-->
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{ title }}</title>
    <base href="{{ base }}" />
    {% if description %}
        <meta name="description" content="{{ description }}" />
    {% endif %}
    {% if keywords %}
        <meta name="keywords" content="{{ keywords }}" />
    {% endif %}
    <script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
    <link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
    <script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />
    <link href="catalog/view/theme/default/stylesheet/stylesheet.css" rel="stylesheet">
    {% for style in styles %}
        <link href="{{ style.href }}" type="text/css" rel="{{ style.rel }}" media="{{ style.media }}" />
    {% endfor %}
    {% for script in scripts %}
        <script src="{{ script }}" type="text/javascript"></script>
    {% endfor %}
    <script src="catalog/view/javascript/common.js" type="text/javascript"></script>
    {% for link in links %}
        <link href="{{ link.href }}" rel="{{ link.rel }}" />
    {% endfor %}
    {% for analytic in analytics %}
        {{ analytic }}
    {% endfor %}
</head>
<body>
<header>
    {#<div class="header-left">#}
        {#<i id="leftMenu" class="fa fa-bars"></i>#}
        {#{% if logged %}#}
            {#<div id="logged">#}
                {#<i class="fa fa-user-o"></i>#}
                {#<ul class="logged-menu">#}
                    {#<li><a href="{{ account }}">{{ text_account }}</a></li>#}
                    {#<li><a href="{{ order }}">{{ text_order }}</a></li>#}
                    {#<li><a href="{{ transaction }}">{{ text_transaction }}</a></li>#}
                    {#<li><a href="{{ download }}">{{ text_download }}</a></li>#}
                    {#<li><a href="{{ logout }}">{{ text_logout }}</a></li>#}
                {#</ul>#}
            {#</div>#}
        {#{% else %}#}
            {#<a href="{{ login }}" style="color: #5d5d5d">#}
                {#<i class="fa fa-user-o"></i>#}
            {#</a>#}
        {#{% endif %}#}
    {#</div>#}
    <div class="logo" id="logo">
        {% if logo %}
            <a href="{{ home }}"><img src="{{ logo }}" title="{{ name }}" alt="{{ name }}" class="img-responsive"/></a>
        {% else %}
            <h1><a href="{{ home }}">{{ name }}</a></h1>
        {% endif %}
    </div>
    {#<div class="header-right">#}
        {#<a href="/checkout_cart.html">#}
            {#<i class="fa fa-shopping-cart"></i>#}
        {#</a>#}
        {#<i id="searchBtn" class="fa fa-search"></i>#}
    {#</div>#}
</header>
{#点击顶部搜索图标#}
{#<div id="homeSearch">#}
    {#<div class="search-top">#}
        {#<i id="searchBack" class="fa fa-angle-left"></i>#}
        {#<div>#}
            {#{{ search }}#}
        {#</div>#}
    {#</div>#}
    {#<div class="search-tip">#}

    {#</div>#}
{#</div>#}
{#左侧菜单的灰色蒙板#}
{#<div id="mask"></div>#}
{#左侧菜单#}
{#<div id="leftCategory" class="translateX-1000">#}
    {#<ul class="category-list">#}
        {#{{ menu }}#}
        {#<li>#}
        {#<a href="#">潮流女裝</a>#}
        {#</li>#}
    {#</ul>#}
{#</div>#}
<script>
    // 點擊左上角菜單圖標
    $('#leftMenu').on("click",function () {
        if($(this).hasClass('fa-bars')){
            $(this).removeClass('fa-bars').addClass('fa-times');
            $('#leftCategory').removeClass('translateX-1000').addClass('translateX-0');
            $('#mask').stop().fadeIn(300);
        }else {
            $(this).removeClass('fa-times').addClass('fa-bars');
            $('#leftCategory').removeClass('translateX-0').addClass('translateX-1000');
            $('#mask').stop().fadeOut(300);
        }
    });
    // 點擊右上角搜索圖標
    $('#searchBtn').on('click',function () {
        $('#homeSearch').stop().slideDown(300);
    });
    $('#searchBack').on('click',function () {
        $('#homeSearch').stop().slideUp(300);
    })
    // 点击已经登录的登录用户图标
    $('#logged').on('click',function () {
        $('.logged-menu').slideToggle();
    })
</script>